<%@ page contentType="text/html;charset=UTF-8" %>
<%@ include file="/WEB-INF/views/include/taglib.jsp"%>
<%@ include file="/WEB-INF/views/include/constrant.jsp"%>
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<link href="${ctxStatic }/mui/css/mui.min.css" rel="stylesheet" />
<link rel="stylesheet" href="${ctxStatic }/wx/css/day_cars.css" />
<link rel="stylesheet" href="${ctxStatic }/wx/css/coupon_total.css" />
<link rel="stylesheet" href="${ctxStatic }/wx/css/personal_a.css" />
<script type="text/javascript" src="${ctxStatic }/zepto/zepto.min.js" ></script>
<script type="text/javascript" src="${ctxStatic }/wx/js/fx.js"></script>
<script src="${ctxStatic }/wx/mui/js/mui.min.js"></script>
<script type="text/javascript" src="${ctxStatic }/wx/mui/js/mui.view.js"></script>
</head>
<body class="mui-fullscreen">
		<!--页面主结构开始-->
		<div id="app" class="mui-views">
			<div class="mui-view">
				<div class="mui-navbar">
				</div>
				<div class="mui-pages">
				</div>
			</div>
		</div>
		<!--页面主结构结束-->
		<!--单页面开始-->
		<div id="airport_car_list" class="mui-page">
			<div class="mui-navbar-inner mui-bar mui-bar-nav">
				<button type="button" class="mui-left mui-action-back mui-btn  mui-btn-link mui-btn-nav mui-pull-left" style="color: #fff;">
					<span class="mui-icon mui-icon-left-nav"  style="color: #fff;"></span>
				</button>
				<h1 class="mui-center mui-title" style="color: #fff;">接送机订单填写</h1>
			</div>
			<div class="mui-page-content">
				<div class="mui-scroll-wrapper">
					<div class="mui-scroll">
						<div class="airport_lists_form">
							<form class="mui-input-group"  id="subForm">
	<input type="hidden" name="userid" value="${sessionScope.front_user.id}" />	
	 <input type="hidden" name="cuponsId" value="" id="cuponsId"/>
    <input type="hidden" value="" id="cuponsMoney" name="money"/>
	<input type="hidden" name="ordername" value="${tRentproduct.productname  }" />
    <input type="hidden" name="boardaddr" value="${tRentproduct.aboardAddress }" />
    <input type="hidden" name="departcity.sitename" value="${tRentproduct.departcity.sitename }" />
    <input type="hidden" name="destcity.sitename" value="${tRentproduct.destcity.sitename}" />
	<input type="hidden" name="ordertype" value="6" />
	<input type="hidden" name="totalPrice" value="${tRentproduct.office.airPrice}" id="total" />
	<input type="hidden" name="office.id" value="${tRentproduct.office.id }" />
	<input type="hidden" name="office.name" value="${tRentproduct.office.abbr }" />
	<input type="hidden" name="office.iswifi" value="${tRentproduct.office.iswifi }" />
	<input type="hidden" name="office.powersupply" value="${tRentproduct.office.powersupply }" />
	<input type="hidden" name="office.tablewater" value="${tRentproduct.office.tablewater }" />
	<input type="hidden" name="office.businesssuit" value="${tRentproduct.office.businesssuit }" />
	<input type="hidden" name="office.paper" value="${tRentproduct.office.paper }" />
	<input type="hidden" name="fromdateStr" value="${tRentproduct.fromdateStr }" />
	<input type="hidden" name="cargotype.typedesc" value="${tRentproduct.cargotype.typedesc }" />
	<input type="hidden" name="cargotype.typename" value="${tRentproduct.cargotype.typename  }" />
	<input type="hidden" name="cargotype.cargotypeid" value="${tRentproduct.cargotype.cargotypeid  }" />
								<div class="list_f_tit">
									<span>
				 	  	  	 	<img src="${ctxStatic }/wx/img/day_img/yongchexinxi_atbc@2x.png"/>
				 	  	  	 </span>
									<span>用车信息</span>
								</div>
								<div class="mui-input-row">
									<label>产品名称</label>
					<p class="lists_jk"> <c:if test="${fn:length(tRentproduct.productname) > 25 }">
						${fn:substring(tRentproduct.productname,0,25)}...
					</c:if>
					<c:if test="${fn:length(tRentproduct.productname)  <= 25 }">
						${tRentproduct.productname }
					</c:if></p>
								</div>
								<div class="mui-input-row">
									 <c:if test="${fn:contains(tRentproduct.productname,'送机')}"><label>上车地点</label></c:if>
									 <c:if test="${fn:contains(tRentproduct.productname,'接机')}"><label>抵达地点</label></c:if>
									<p class="lists_jk">${tRentproduct.aboardAddress }</p>
								</div>
								<div class="mui-input-row">
									<label>用车时间</label>
									<p class="lists_jk">${tRentproduct.fromdateStr }</p>
								</div>
								<div class="mui-input-row">
									<label>车型</label>
									<p class="lists_jk">${tRentproduct.cargotype.typename }</p>
								</div>
								<div class="mui-input-row">
									<label>服务车队</label>
									<p class="lists_jk">${tRentproduct.office.abbr }</p>
								</div>
								<div class="mui-input-row">
									<label>服务特色</label>
									<p class="lists_jk"><c:if test="${tRentproduct.office.iswifi == '1' }">无线wifi</c:if>
							<c:if test="${tRentproduct.office.powersupply == '1' }">车载充电</c:if>
							<c:if test="${tRentproduct.office.tablewater == '1' }">免费饮用水</c:if>
							<c:if test="${tRentproduct.office.businesssuit == '1' }">商务正装</c:if>
							<c:if test="${tRentproduct.office.paper == '1' }">免费纸巾</c:if> </p>
								</div>
								<div class="list_f_tit">
									<span>
				 	  	  	 	<img src="${ctxStatic }/wx/img/day_img/xinxitianxie_atbc@2x.png"/>
				 	  	  	 </span>
									<span>信息填写</span>
								</div>
								<div class="mui-input-row">
									<label>用车辆数</label>
									<div class="mui-numbox" data-numbox-step='1' data-numbox-min='1' data-numbox-max='10'>
										<button class="mui-btn mui-btn-numbox-minus purchasenum" type="button">-</button>
										<input class="mui-input-numbox" type="number" name="purchasenum" id="num"/>
										<button class="mui-btn mui-btn-numbox-plus purchasenum" type="button">+</button>
									</div>
								</div>
								<div class="mui-input-row">
									<label>联系人</label>
									<input type="text" class="mui-input-clear" placeholder="请填写联系人姓名" name="contacts" id="contacts">
								</div>
								<div class="mui-input-row">
									<label>联系电话</label>
									<input type="text" class="mui-input-clear" placeholder="请填写联系电话"  name="payertel" id="payertel" value="${sessionScope.front_user.mobile}">
								</div>
								<div class="list_f_tit">
									<span>
				 	  	  	 	          <img src="${ctxStatic }/wx/images/yhq_wode@2x.png"/>
				 	  	  	            </span>
									<span>优惠券</span>
								</div>
								<div class="mui-input-row d_list_coupon">
									<a href="#coupon_total" class="mui-navigate-right cou_choice" id="yhq">
										<span class="do_cou_txt">请选择优惠券</span>
										<span class="do_cou_ty"></span>
									</a>
								</div>
								<div class="list_f_tit">
									<a href="#reserve1_md">
									<span>
				 	  	  	 	   <img src="${ctxStatic }/wx/img/day_img/xuzhi_atbc@2x.png"/>
				 	  	  	        </span>
									<span>预订须知</span>
									<i class="mui-icon mui-icon-arrowright" style="color: #C8C7CC;"></i>
									</a>
								</div>
							</form>
						</div>
					</div>
				</div>
			</div>
			<form id="shareForm" action="${ctxWx}/share/toAirShare" method="post">
			<input type="hidden" id="sharePrice" name="suitrtnprice" />
			<input type="hidden" name="userid"  value="${sessionScope.front_user.id}"/>
			<input type="hidden" id="productname" name="productname" value="${tRentproduct.productname }" />
			<input type="hidden" id="cuponsId1" name="cuponsId"  value=""/>
			<input type="hidden" id="boardaddr1" name="boardaddr"  value="${tRentproduct.aboardAddress }"/>
			<input type="hidden" id="departsiteName" name="departsiteName"  value="${tRentproduct.departcity.sitename }"/>
			<input type="hidden" id="destsiteName" name="destsiteName"  value="${tRentproduct.destcity.sitename }"/>
			<input type="hidden" id="cargotype" name="cargotype"  value="${tRentproduct.cargotype.cargotypeid  }"/>
			<input type="hidden" id="fromdate1" name="fromdate"  value="${tRentproduct.fromdateStr }"/>
			<input type="hidden" id="abbr" name="abbr"  value="${tRentproduct.office.abbr }"/>
			<input type="hidden" id="officename" name="officename"  value="${tRentproduct.office.name }"/>
			</form>
			<nav class="mui-bar mui-bar-tab db_box">
				<div class="mui-row">
					<div class="mui-col-xs-6">
						<span class="db_or_cost" >
							总额：￥<span id="suitrtnprice"><c:set var="totalPrice" value="${tRentproduct.office.airPrice }"/>${totalPrice}  </span>
						</span>
						<span class="db_or_cost" >
								<a id="share">去拼车</a>
							</span>
					</div>
					<div class="mui-col-xs-6">
						<button class="db_btn" id="sub">提交</button>
					</div>
				</div>
			</nav>
		</div>
		<!--单页面结束-->
     	<div id="coupon_total" class="mui-page">
			<div class="mui-navbar-inner mui-bar mui-bar-nav">
				<button type="button" class="mui-left mui-action-back mui-btn  mui-btn-link mui-btn-nav mui-pull-left" style="color: #fff;">
					<span class="mui-icon mui-icon-left-nav"  style="color: #fff;"></span>
				</button>
				<h1 class="mui-center mui-title" style="color: #fff;">选择优惠券</h1>
			</div>
			<div class="mui-page-content">
				<div class="mui-scroll-wrapper">
					<div class="mui-scroll" id="ul"></div>
				</div>
			</div>
		</div>
		<!--预订须知 -->
		<div id="reserve1_md" class="mui-page">
			<div class="mui-navbar-inner mui-bar mui-bar-nav">
				<button type="button" class="mui-left mui-action-back mui-btn  mui-btn-link mui-btn-nav mui-pull-left" style="color: #fff;">
					<span class="mui-icon mui-icon-left-nav"  style="color: #fff;"></span>
				</button>
				<h1 class="mui-center mui-title" style="color: #fff;">预定须知</h1>
			</div>
			<div class="mui-page-content">
				<div class="mui-scroll-wrapper">
					<div class="main">
						 <div class="margs">
        <div class="start">
            <p class="start-1">费用明细</p>

                <p>
                    费用包含：【一价全包】全程司机代驾服务费、车辆使用费、车辆油电费、 空驶费、夜间服务费、司机小费、路桥费、停车费、摆渡费。
                </p>

        </div>

<div>

    <p class="start-1">取消须知</p>
    <div class="mour">
      <p> ●该产品支持取消。</p>
      <p>●出行日期前24小时前取消，免收违约金；</p>
      <p>●出行日期前24小时至12小时取消，收取费用总额10%的违约金；</p>
      <p>●出行日期前12小时至2小时取消，收取费用总额30%的违约金；</p>
      <p>●出行开始前2小时取消，收取全额费用的违约金；</p>
      <p>●超过发车时间不可退款。</p>
      <p>●如需改期，请申请取消后重新预订。</p>   
    </div>
   </div>
           <p class="start-1">
                重要提示
            </p>
            <div class="mour">
             <p> 1、如您的预订时间距离发车时间在12小时以内，为保证您的顺利出行，请保持您的电话畅通。</p>
             <p> 2、如产生不含费用项请在服务结束后，将钱面付司机。严禁司机额外乱收费，如发现可联系霞客约车客服核实退还。</p>
             <p> 3、开具发票:如需发票，由霞客约车根据订单金额统一开具。请在服务完成后至我的账户—关于发票—立即开票填写开票信息，开票总金额为订单费用。</p>
             <p>4、接送站包车一口价产品不能临时改变路线。如您需要送达同城多个地址或在多个地址上车，司机会合理安排行驶路线。如您需要送达多个城市或在多个城市上车，请分开下单。</p>
            </div>
    

    </div>
					</div>
				</div>
			</div>
		</div>
	</body>
	<script>
		mui.init();
		//初始化单页view

		var viewApi = mui('#app').view({
			defaultPage: '#airport_car_list'
		});
		//初始化单页的区域滚动
		mui('.mui-scroll-wrapper').scroll();

		var view = viewApi.view;
		(function($) {
			//处理view的后退与webview后退
			var oldBack = $.back;
			$.back = function() {
				if(viewApi.canBack()) { //如果view可以后退，则执行view的后退
					viewApi.back();
				} else { //执行webview后退
					oldBack();
				}
			};

		})(mui);

		Zepto(function() {
			//传值
			$('.ychback').on('tap', function() {
				var oInput1 = $('#suggestId').attr('value');
				$('#days_l_date').attr('value', oInput1);
				$('#boardaddr1').attr('value', oInput1);
			})
			var suitrtnprice = ${tRentproduct.office.airPrice};
			var totalprice = "${tRentproduct.office.airPrice}";
			$('.purchasenum').on('tap',function(){
				//清空优惠券信息
				$('.do_coupon').removeClass('do_coupon_gc')
				$('.do_cou_txt').text('请选择优惠券').css('color', '#C8C7CC');
				$('.do_cou_ty').text('');
				$('#cuponsId').val('');
				$('#cuponsId1').val('');
				$('#cuponsMoney').val('');
				var val = $("#num").val();
				totalprice = accMul(val,suitrtnprice);
				$('#suitrtnprice').text(totalprice.toFixed(0));
				$('#total').val(totalprice.toFixed(0));
			});
			//获取优惠券
			$('#yhq').on('tap', function() {
				mui.post('${ctxFront}/mobile/canusecupons',{userId:'${sessionScope.front_user.id}',nowPrice:$('#suitrtnprice').text()},function(d){
					if(d.code=='200'){
						var sm = d.data.info;
						var x = Number(totalprice);
						var table = document.getElementById("ul");
						table.innerHTML = "";//清空数据
						for (var i=0;i<sm.length;i++) {
							if(x<Number(sm[i].minPrice)){
								continue;
							}
							var div = document.createElement("div");
							var dateStr = getLocalTime(sm[i].timeOver);
							div.className = "coupon_t_wrap";
							var str = "";
							if(i==0){
								str += "<div class='no_coupon mui-action-back'>";
								str	+= "	<button type='button'>不使用优惠券</button>";
								str	+= "</div>";
							}
							str += "<div class='do_coupon mui-action-back'>";
							str += "<div class='mui-row'>";
							str += "<div class='mui-col-xs-4 do_coupon_cost'>";
							if (sm[i].type=='0') {//满减
								str += "<span class='do_cou_ct'>￥"+sm[i].price+"</span>";
							} else{//折扣
								str += "<span class='do_cou_ct'>"+sm[i].price+"折</span>";
							}
							str += "<span style='display:none;' class='cuponsMoney'>"+sm[i].price+"</span>";
							str += "</div>";
							str += "<div class='mui-col-xs-8 do_coupon_txt'>";
							str += "<p class='do_cou_type'>"+sm[i].name+"</p>";
							str += "<input type='hidden' class='cuponsId' name='cuponsId' value='"+sm[i].cuponRecordId+"'>";
							str += "<p>"+sm[i].instruction+"</p>";
							str += "<p>有效期至："+dateStr+"</p>";
							str += "</div>";
							str += "</div>";
							str += "</div>";
							
							div.innerHTML = str;
	            			table.appendChild(div);
						}
						if (table.innerHTML=="") {
							mui.alert("暂无可用优惠券")
						}
			$('.no_coupon').on('tap', function() {
				$('#cuponsId').val('');
				$('#cuponsId1').val('');
				$('#cuponsMoney').val('');
				var suitrtnprice = '${tRentproduct.office.airPrice}';
				$('.do_coupon').removeClass('do_coupon_gc')
				$('.do_cou_txt').text('请选择优惠券').css('color', '#C8C7CC');
				$('.do_cou_ty').text('');
				var val = $("#num").val();
				var totalprice = accMul(val,suitrtnprice);
				suitrtnprice = totalprice;
				$('#suitrtnprice').text(suitrtnprice);
				$('#total').val(suitrtnprice.toFixed(0));
			})
			//优惠券
			$('.do_coupon').on('tap', function() {
				$('#cuponsId').val('');
				$('#cuponsId1').val('');
				$('#cuponsMoney').val('');
				var suitrtnprice = '${tRentproduct.office.airPrice}';
				$(this).addClass('do_coupon_gc').siblings('.do_coupon').removeClass('do_coupon_gc');
				//传值
				var costxt = $(this).find('.do_cou_ct').text();
				var costxt2 = $(this).find('.cuponsMoney').text();
				var costype = $(this).find('.do_cou_type').text();
				var cuponsId = $(this).find('.cuponsId').val();
				if(costxt.indexOf("折")>-1){
					$('.do_cou_txt').text(costxt).css('color', 'red');
				}else{
					$('.do_cou_txt').text('-' + costxt).css('color', 'red');
				}
				var val = $("#num").val();
				var totalprice = accMul(val,suitrtnprice);
				suitrtnprice = totalprice;
				if(costxt2<10){  //代表打折券
					suitrtnprice = Math.round(suitrtnprice * (costxt2/10));
					costxt2 = totalprice - suitrtnprice;
				}else{//满减券
					suitrtnprice = suitrtnprice - costxt2;
				}
				//清空优惠券信息
				$('#suitrtnprice').text(suitrtnprice);
				$('#total').val(suitrtnprice.toFixed(0));
				$('.do_cou_ty').text(costype);
				$('#cuponsId').val(cuponsId);
				$('#cuponsId1').val(cuponsId);
				$('#cuponsMoney').val(costxt2);
			})
					}else{
						mui.alert("暂无可用优惠券");
					}
				});
			});
			//提交表单
			$('#sub').on('tap', function() {
				var msg= '';
				var r = /^1[3|4|5|7|8]\d{9}$/;
				var z = $('#payertel').val();//出发地
				var w = $('#contacts').val();//出发地
				if(z==''){
					msg = '请填写联系电话';
				}else if(!r.test(z)){
					msg = '手机号格式不正确';
				}else if(w==''){
					msg = '请填写联系人';
				}
				if(msg != ''){
					mui.alert(msg, '提示');
				} else{
					mui.post('${ctxFront}/mobile/submitAirRentOrder',$('#subForm').serialize(),function(d){
						if(d.code=='200'){
							var orderid = d.data.orders.orderid;
							window.location.href = "${ctxWx}/pu/pay/payWay?orderid="+orderid;
						}else{
							mui.alert(d.message);
						}
					});
				}
			});
			//拼车
			$('#share').on('tap', function(){
				var msg= '';
				var r = /^1[3|4|5|7|8]\d{9}$/;
				var z = $('#payertel').val();//出发地
				var w = $('#contacts').val();//出发地
				var p = $('#num').val();//出发地
				if(z==''){
					msg = '请填写联系电话';
				}else if(!r.test(z)){
					msg = '手机号格式不正确';
				}else if(w==''){
					msg = '请填写联系人';
				}else if(p>1){
					msg = '拼车服务只支持一辆车';
				}
				if(msg != ''){
					mui.alert(msg, '提示');
				} else{
					$('#sharePrice').val($('#suitrtnprice').text());
					$('#shareForm').submit();
				}
			});
		})
		function accMul(arg1, arg2) {
		var m = 0, s1 = arg1.toString(), s2 = arg2.toString();
		try {
			m += s1.split(".")[1].length;
		} catch (e) {
		}
		try {
			m += s2.split(".")[1].length;
		} catch (e) {
		}
		return Number(s1.replace(".", "")) * Number(s2.replace(".", ""))
				/ Math.pow(10, m);
	}
				//时间戳转时间格式
	function getLocalTime(nS) {  
		var date = new Date();  
	    date.setTime(nS);  
	    var y = date.getFullYear();      
	    var m = date.getMonth() + 1;      
	    m = m < 10 ? ('0' + m) : m;      
	    var d = date.getDate();      
	    d = d < 10 ? ('0' + d) : d;      
	    var h = date.getHours();    
	    h = h < 10 ? ('0' + h) : h;    
	    var minute = date.getMinutes();    
	    var second = date.getSeconds();    
	    minute = minute < 10 ? ('0' + minute) : minute;      
	    second = second < 10 ? ('0' + second) : second;     
	    return y + '-' + m + '-' + d+' '+h+':'+minute+':'+second;      
	};
	</script>

</html>